<template>
  <div class="echarts-box">
    <div class="grid-box">
      <echarts1></echarts1>
    </div>
    <div class="grid-box">
      <echarts2></echarts2>
    </div>
    <div class="grid-box">
      <echarts3></echarts3>
    </div>
    <div class="grid-box">
      <echarts4></echarts4>
    </div>
    <div class="grid-box">
      <echarts5></echarts5>
    </div>
  </div>
</template>
<script lang="ts" setup>
import echarts1 from './components/echarts1.vue';
import echarts2 from './components/echarts2.vue';
import echarts3 from './components/echarts3.vue';
import echarts4 from './components/echarts4.vue';
import echarts5 from './components/echarts5.vue';

</script>
<style lang="less" scoped>
.echarts-box {
  width: 100%;
  height: calc(100vh - 90px);
  background: white;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  overflow: auto;
  padding: 10px;

  .grid-box {
    border-radius: 6px;
    // height: 100%;
    height: 300px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
}
</style>